var path = require('path');//这个是格式化路径的。

var htmlwp = require('html-webpack-plugin');

module.exports = {
    //入口文件
    entry: path.resolve(__dirname,'./src/main.js'),
    //输出文件
    output: {
        //输出至哪个文件夹
        path: path.resolve(__dirname,'dist'),
        //输出的文件名
        filename: 'build.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'url-loader?limit=20000'
            },
            {
                test: /.(woff|woff2|svg|eot|ttf)$/,
                use: 'url-loader? prefix = font /&limit = 10000'
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                    options: { presets: ['es2015'], plugins: ['transform-runtime'] }
                }]
            },   //语法项配置完成，这里没有用那个.babelrc文件里的plugins: ['transform-runtime']这个东西。要加的话，可能是放在options这个对象里面。好吧，我已经放进去了。
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ]
    },
    plugins: [
        new htmlwp({
            title: '首页', //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html',  //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'template.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]

}
